<template>
	<view class="bg">
		<view class="within">
			
			<view class="within_in">
				<view class="progress-container">
				  <view class="progress-bg"></view>
				  <view class="progress-fill">
				    <!-- <view class="progress-bar"></view> -->
						<view class="circle">
								<view class="half_circle"></view>
								<view class="half_circle"></view>
						</view>
				  </view>
				  <image class="within_img" src="/static/logo.png" alt=""></image>
				  <!-- <view class="progress-text">100%</view> -->
				</view>
				
			</view>
			<!-- <progress-bar style="width: 100%;" :progress="progress"></progress-bar>
			<view v-if="progress === 100">
			</view> -->
			<!--  -->
			<!--  -->
			
		</view>
	</view>
</template>

<script>
	import ProgressBar from '@/components/ProgressBar.vue'; // 确保路径正确

	export default {
		components: {
			ProgressBar
		},
		data() {
			return {
				progress: 0,
			};
		},
		mounted() {
			this.simulateLoading();
			this.simulateLoading2();
		},
		methods: {
			simulateLoading() {
				//let currentProgress = 0;
				const interval = setInterval(() => {
					//currentProgress += 10; // 每次增加10%
					this.progress += 16.777;
					console.log(this.progress);
					if (this.progress >= 100) {
						clearInterval(interval); // 完成加载后清除定时器
						// uni.switchTab({
						// 	url: '/pages/index/index' // 假设首页路径是pages/index/index
						// });
					}
				}, 500); // 每500毫秒更新一次进度，模拟加载时间可根据需要调整
			},
			simulateLoading2() {
				setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index' // 假设首页路径是pages/index/index
						});
				}, 4000)
			}
		}
	}
</script>
<style lang="scss">
	
	.bg {
		width: 100vw;
		background: url("https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/bg.jpg") no-repeat center center;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;

		/* 使容器充满整个视口高度 */
		.within {
			width: 40%;
			.within_img {
				width: 180rpx;height: 180rpx;border-radius: 50%;			
				display: block;
				  position: absolute;
					  top: 50%;
					  left: 50%;
					  transform: translate(-50%, -50%);		
			}
		}
	}
	
	
	.within_in {
	margin: 20upx auto;
	  width: 192rpx;
	  height: 192rpx;
	  margin-bottom: 40rpx;
	
	}
	
	/**/
	.progress-container {
	  width: 192rpx;
	  height: 192rpx;
	  position: relative;
	  
	  
	}
	
	.progress-bg {
		
	  width: 100%;
	  height: 100%;
	  border-radius: 50%;
	  border: 6px solid #f0f0f0;
	  box-sizing: border-box;
	}
	
	.progress-fill {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  // border: 1px solid #3498db;
	  // border-radius: 50%;
	  // clip: rect(0, 200px, 200px, 0); /* 切割左半圆 */
	}
	
	
	// .progress-text {
	//   position: absolute;
	//   top: 50%;
	//   left: 50%;
	//   transform: translate(-50%, -50%);
	//   font-family: Arial;
	//   font-size: 24px;
	//   color: #3498db;
	// }


	.circle {
  /* 定义变量 */
  --size: 192rpx;
  --border-size: 6rpx;
  border-color: #2f435a;
  /* 尺寸 */
  width: var(--size);
  height: var(--size);
  /* flex布局让两个半圆区域分别在左右两侧 */
  display: flex;
  justify-content: space-between;
}

.circle .half_circle {
  /* 定位方式 */
  position: relative;
  /* 尺寸计算方式 */
  box-sizing: border-box;
  /* 尺寸 一半大小 */
  width: calc(var(--size) / 2);
  height: var(--size);
  /* background-color: #F97F51; */
  overflow: hidden;
}

.circle .half_circle::before {
  position: absolute;
  content: '';
  box-sizing: border-box;
  /* 尺寸 */
  width: var(--size);
  height: var(--size);
  border: var(--border-size) solid;
  border-radius: 50%;
  transform: rotate(45deg);
  animation: animate 2s linear 1 both;
}

.circle .half_circle:nth-child(1)::before {
  /* 靠左 */
  left: 0;
  /* 分别定义四条边的颜色，其中两条边为透明 */
  border-color: #3498db #3498db transparent transparent;
  /* 效果1延迟4s 的一半 */
  animation-delay: 0s;
  /* 效果2延迟4s */
  animation-delay: 2s;
}

.circle .half_circle:nth-child(2)::before {
  /* 靠右 */
  right: 0;
  /* 分别定义四条边的颜色，其中两条边为透明 */
  border-color: transparent transparent #3498db #3498db;
}

@keyframes animate{
  0%{
      transform:rotate(45deg)
  }
  100%{
      /* 效果1 延迟动画效果的一半，是整圆 */
      /* transform:rotate(405deg); */
      /* 效果2 */
      transform:rotate(225deg);
  }
}
</style>


